<script>
    import dispatch from "../../Entiys/Character/impl/dispatch.js";
    import Detail from "./Detail.svelte";
    import {eventEmitter} from "../eventEmitter.js";
    import MainMenu from "../MainMenu.svelte";
    import Home from "../ContentChild/GameMain/Home.svelte";

    export let selected_index = 0;

    let dis = dispatch;
    let init_character = dispatch.config.init_character;
    let event_emitter = eventEmitter;

    $: character = dis[init_character[selected_index]];




</script>


<div class="select-character-detail">
    <div class="character-image">
        <img src="{character.images.full}" alt="" class="image-detail">
    </div>
    <div class="character-detail">
        <div class="character-name">
            {character.name}
        </div>

        <div class="trait-info">
            <div id="trait-name">{character.trait.name}</div>
            <div id="trait-info">{character.trait.desc}</div>
        </div>

        <div class="detail">
            <Detail title="生命值" info="{character.hp}"></Detail>
            <Detail title="攻击" info="{character.attack}"></Detail>
            <Detail title="防御" info="{character.defense}"></Detail>
        </div>

        <div class="active">
            <div class="button" on:click={()=>{character
            eventEmitter.emit('modal-show', {
                title: '确认操作',
                detail: '确定要执行此操作吗？',
                button: [
                    {
                        value: "取消",
                        type: "Basic"
                    },
                    {
                        value: "确定",
                        type: "Important",
                        callbacks: () => {
                            console.log('确认操作');
                            event_emitter.emit("component_update", Home);
                        }
                    }
                ]
            });
            }}>确定了！初始角色
            </div>
        </div>
    </div>
</div>

<style lang="less">
  .detail{
    display: flex;
    gap: 20px;
    margin: 30px 0;
    flex-direction: column;
    width: 80%;

  }
  .select-character-detail {
    display: flex;
    gap: 20px;

    .character-image {
      width: 42%;
    }

    .character-detail {
      width: 58%;
      padding: 50px 20px;
      box-sizing: border-box;
    }
  }

  .image-detail {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #FFD700;
  }

  .character-name {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #FFD700;
  }

  #trait-name {
    color: #ff9900;
    font-size: 1.2rem;
    font-weight: bold;
  }

  #trait-info {
    color: #cccccc;
  }

  .button {
    background: #ffd700;
    color: #000000;
    border: none;
    padding: 1rem 2rem;
    font-size: 1.2rem;
    border-radius: 5px;
    cursor: pointer;
    width: fit-content;
    transition: all 0.3s ease;

    &:hover {
      background: #FFED4A;
      transform: scale(1.03);
    }
  }
</style>